<template>
  <view class="container" style="background-color: #fff">
    <view class="fj">
      <view class="fj-label">附件</view>
      <view class="fj-button" @click="handleAddFile">上传</view>
    </view>
    <view v-show="inputfile && inputfile.length">
      <Imgs :imgs="inputfile"></Imgs>
    </view>
    <uni-forms
      v-for="(item, index) in mxDatas"
      ref="formRef"
      label-position="top"
      :model="item"
      :rules="rules"
      label-width="100vw"
      class="sis-form"
    >
      <view class="form-top">
        <view class="form-top-label">明细表第{{index+1}}行</view>
        <view class="form-top-button" @click="delMx(index)">删除该行</view>
      </view>
      <uni-forms-item
        label="恢复罐号"
        name="deviceName"
        required
        :rules="[
          {
            required: true,
            errorMessage: '字段为必填项',
          },
        ]"
      >
        <uni-data-select
          v-model="item.deviceName"
          :localdata="zzData"
        ></uni-data-select>
      </uni-forms-item>
      <uni-forms-item
        label="恢复原因"
        name="hfyy"
        required
        :rules="[
          {
            required: true,
            errorMessage: '字段为必填项',
          },
        ]"
      >
        <uni-data-checkbox
          v-model="item.hfyy"
          :localdata="qcyyData"
          :multiple="true"
          mode="list"
        ></uni-data-checkbox>
        <uni-easyinput
          type="text"
          v-if="item.hfyy.includes('其他')"
          v-model="item.hfyy[10]"
        />
      </uni-forms-item>
    </uni-forms>
    <view class="addmx">
      <view class="addmx-button" @click="addFormData">添加明细行</view>
    </view>
    <view class="sprList">
      <view class="sprList-title">审批流程</view>
      <view v-for="item in sprList" class="sprList-item">
        <view class="label">{{ item.phase + ".审批人" }}</view>
        <view class="user">{{ item.userName }}</view>
      </view>
    </view>
    <button type="primary" @click="handleSubmit" style="margin-top: 20upx">
      提交
    </button>
  </view>
</template>

<script setup>
import { ref, getCurrentInstance, onMounted, watch } from "vue";
import { apis as APIS } from "@/api/sis.js";
import { router } from "@/router/index.js";
import { useAuthStore } from "@/store/modules/auth.js";
import { BASE_URL } from "@/utils/requset.js";
import Imgs from "@/components/forImgs.vue";
const mxDatas = ref([{
  hfyy:[]
}]);
const addFormData = () => {
  mxDatas.value.push({
    hfyy:[]
  });
};
const delMx = (index) => {
  mxDatas.value.splice(index, 1);
};
const formData = ref({});
const qcyyData = [
  {
    value: "液位计修复",
    text: "液位计修复",
  },
  {
    value: "液位已至正常区间",
    text: "液位已至正常区间",
  },

  {
    value: "油槽检修结束",
    text: "油槽检修结束",
  },
  {
    value: "浮盘已起浮",
    text: "浮盘已起浮",
  },
  {
    value: "其他",
    text: "其他",
  },
];

const authStore = useAuthStore();
const token = authStore.getToken;
const zzData = ref([]);
const sprList = ref([]);
APIS.zz().then((res) => {
  zzData.value = res.rows.map((item) => ({
    value: item.deviceName,
    text: item.deviceName,
  }));
});
APIS.spr().then((res) => {
  sprList.value = res.rows;
});
const formRef = ref();
const handleSubmit = async (data) => {
  let flag = true;
  let index = 0;
  while (index < formRef.value.length) {
    try {
      await formRef.value[index].validate();
      mxDatas.value[index].hfyy = mxDatas.value[index].hfyy.filter(
        (item) => item != "其他" && !!item
      );
    } catch (e) {
      flag = false;
    }
    index++;
  }
  if (!flag) {
    uni.showModal({
      title: "有必填项未填",
    });
    return;
  }
 
  APIS.add({
    ...formData.value,
    approveType: 2,
    detaileds: JSON.stringify(mxDatas.value),
  }).then((res) => {
    router.back();
  });
};

const inputfile = ref([]);
const handleAddFile = () => {
  // return;
  uni.chooseImage({
    count: 6, //默认9
    sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
    sourceType: ["album", "camera"], //album 从相册选图，camera 使用相机
    success: function (res) {
      const { tempFilePaths, tempFiles } = res;
      uni.uploadFile({
        url: BASE_URL + "/file/upload", //服务器地址服务器地址
        fileType: tempFiles[0].type, //ZFB必填,不然报错
        filePath: tempFilePaths[0], //这个就是我们上面拍照返回或者先中照片返回的数组
        name: "file",
        header: {
          Authorization: `Bearer ${token}`,
        },
        success: (uploadFileRes) => {
          const { data } = uploadFileRes;
          const res = JSON.parse(data);
          const { code, msg } = res;
          if (code !== 200) {
            uni.showToast({
              title: msg,
              icon: "error",
            });
            return false;
          }
          formData.value.fileUrl = res.data.fileUrl;
          formData.value.fileName = res.data.fileName;
          inputfile.value = [res.data];
        },
      });
    },
    fail: function (err) {
      console.log(err);
    },
  });
};
onMounted(() => {});
</script>

<style lang="scss" scoped>
.container {
  padding: 16upx;
  background-color: #eee !important;
  overflow: auto;
}

.fj {
  display: flex;
  justify-content: space-between;
  font-size: 30upx;
  background-color: #fff;
  border-radius: 5px;
  margin-bottom: 20upx;
  padding: 16upx;
  &-button {
    background-color: #eee;
    padding: 4upx 20upx;
    border-radius: 16upx;
  }
}
.form-top {
  display: flex;
  justify-content: space-between;
  font-size: 30upx;
  background-color: #fff;
  margin-bottom: 20upx;
  &-label {
    font-weight: 700;
  }
  &-button {
    background-color: #eee;
    padding: 4upx 20upx;
    border-radius: 16upx;
  }
}
.sis-form {
  background-color: #fff;
  border-radius: 5px;
  padding: 16upx;
}

.addmx {
  border-radius: 5px;
  margin-top: 20upx;
  background-color: #fff;
  padding: 20upx;

  &-button {
    background-color: #eee;
    padding: 14upx 0;
    border-radius: 30upx;
    text-align: center;
  }
}

.sprList {
  background-color: #fff;
  padding: 16upx;

  &-title {
    font-weight: 700;
    margin-bottom: 16upx;
  }
  &-item {
    border-top: 1px solid #eee;
    padding-top: 16upx;
    .label {
      background-color: #eee;
      max-width: 200upx;
      padding: 8upx 16upx;
      border-radius: 16upx;
      text-align: center;
    }
    .user {
      padding: 16upx;
    }
  }
}
</style>
